<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__layuimini__/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="__layuimini__/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <link rel="stylesheet" href="__layuimini__/css/public.css" media="all">
    <style>
        .baiwu{
            width: 50%;
        }
        .baisan{
            width: 30%;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form" action="">
            <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">上传文件</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<div id="zyupload" class="zyupload"></div>-->
                    <!--&lt;!&ndash;<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">&ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->
            <input type="hidden" name="table" value="{$data['table']|default=''}">
            <div class="layui-form-item">
                <label class="layui-form-label">字段名称</label>
                <div class="layui-input-block baiwu">
                    <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入字段名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字段名</label>
                <div class="layui-input-block baiwu">
                    <input type="text" name="field" lay-verify="required" lay-reqtext="必填？" placeholder="请输入字段名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block baiwu">
                    <textarea name="describe" placeholder="请输入描述" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字段类型</label>
                <div class="layui-input-block baisan">
                    <select name="type" lay-search>
                        {foreach $field['type']['option'] as $key=>$value}
                        {if $key=='varchar'}
                        <option value="{$key}" selected>{$value}</option>
                        {else}
                        <option value="{$key}">{$value}</option>
                        {/if}
                        {/foreach}
                        <!--<option value="InnoDB" selected>InnoDB</option>-->
                        <!--<option value="MyISAM">MyISAM</option>-->
                        <!--<option value="1" selected="">阅读</option>-->
                        <!--<option value="2">游戏</option>-->
                        <!--<option value="3">音乐</option>-->
                        <!--<option value="4">旅行</option>-->
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字段长度</label>
                <div class="layui-input-block baiwu">
                    <input type="text" name="lang"  placeholder="请输入字段长度,[10/10,2]" value="255" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block baiwu">
                    <input type="text" name="sort"  placeholder="请输入字段排序" value="100" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">表单类型</label>
                <div class="layui-input-block baisan">
                    <select name="formtype" lay-search>
                        {foreach $field['formtype']['option'] as $key=>$value}
                        <option value="{$key}">{$value}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">选项</label>
                <div class="layui-input-block baiwu">
                    <textarea name="option" placeholder="请输入内容[下拉框,单选框，复选框的选项,以英文,分割]" class="layui-textarea"></textarea>
                    <tip style="color: red">例：select:下拉框,ordio:单选框</tip>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到表格</label>
                <div class="layui-input-block">
                    {if isset($field['show']['default'])&&$field['show']['default']==1}
                    <input type="checkbox" checked="" name="show" lay-skin="switch" lay-text="ON|OFF">
                    {else}
                    <input type="checkbox" name="show" lay-skin="switch" lay-text="ON|OFF">
                    {/if}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">编辑</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked="" name="edit" lay-skin="switch" lay-text="ON|OFF">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">搜索</label>
                <div class="layui-input-block">
                    {if isset($field['search']['default'])&&$field['search']['default']==1}
                    <input type="checkbox" checked="" name="search" lay-skin="switch" lay-text="ON|OFF">
                    {else}
                    <input type="checkbox" name="search" lay-skin="switch" lay-text="ON|OFF">
                    {/if}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">合计</label>
                <div class="layui-input-block">
                    {if isset($field['total']['default'])&&$field['total']['default']==1}
                    <input type="checkbox" checked="" name="total" lay-skin="switch" lay-text="ON|OFF">
                    {else}
                    <input type="checkbox" name="total" lay-skin="switch" lay-text="ON|OFF">
                    {/if}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">导出</label>
                <div class="layui-input-block">
                    {if isset($field['export']['default'])&&$field['export']['default']==1}
                    <input type="checkbox" checked="" name="export" lay-skin="switch" lay-text="ON|OFF">
                    {else}
                    <input type="checkbox" name="export" lay-skin="switch" lay-text="ON|OFF">
                    {/if}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是空</label>
                <div class="layui-input-block">
                    {if isset($field['is_null']['default'])&&$field['is_null']['default']==1}
                    <input type="checkbox" checked="" name="is_null" lay-skin="switch" lay-text="ON|OFF">
                    {else}
                    <input type="checkbox" name="is_null" lay-skin="switch" lay-text="ON|OFF">
                    {/if}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">链接表</label>
                <div class="layui-input-block baisan">
                    <select name="join_table" lay-search>
                        <option value="">请选择</option>
                        {foreach $field['join_table']['option'] as $key=>$value}
                        <option value="{$value['id']}">{$value['name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">外键</label>
                <div class="layui-input-block baiwu">
                    <input type="text" name="foreign_key"  placeholder="请输入联表外键" value="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    {if isset($field['status']['default'])&&$field['status']['default']==1}
                    <input type="checkbox" checked="" name="status" lay-skin="switch" lay-text="ON|OFF">
                    {else}
                    <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF">
                    {/if}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">默认</label>
                <div class="layui-input-block baiwu">
                    <input type="text" name="default"  placeholder="请输入字段默认" value="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="__layuimini__/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="__layuimini__/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="__layuimini__/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    $(function () {
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "400px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "api/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            // dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });
    })
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        // form.verify({
        //     title: function (value) {
        //         if (value.length < 5) {
        //             return '标题至少得5个字符啊';
        //         }
        //     }
        //     , pass: [
        //         /^[\S]{6,12}$/
        //         , '密码必须6到12位，且不能出现空格'
        //     ]
        //     , content: function (value) {
        //         layedit.sync(editIndex);
        //     }
        // });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            var datas = data.field;
            var index = layer.load();
            $.post("{:url('system.field/add')}",datas,function (res) {
                console.log(res);
                layer.close(index);
                if(res.code==200){
                    layer.msg(res.msg,{time:1000},function () {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    })
                }else{
                    layer.msg(res.msg);
                }
                // console.log(res);
            })
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        });

        //表单初始赋值
        form.val('example', {
            "username": "贤心" // "name": "value"
            , "password": "123456"
            , "interest": 1
            , "like[write]": true //复选框选中状态
            , "close": true //开关状态
            , "sex": "女"
            , "desc": "我爱 layui"
        })


    });
</script>

</body>
</html>